<template>
  <div class="component-base-config">
    <div class="content-pad-item__title not-tag">位置与尺寸</div>
    <div class="content-pad-row">
      <div class="row-grid">
        <p>X</p>
        <el-input-number
          v-model="left"
          :step="1"
          :min="0"
          controls-position="right"
          @change="debounceUpdatePosition()"
        />
      </div>
      <div class="row-grid">
        <p>Y</p>
        <el-input-number
          v-model="top"
          :step="1"
          :min="0"
          controls-position="right"
          @change="debounceUpdatePosition()"
        />
      </div>
    </div>
    <div class="content-pad-row">
      <div class="row-grid">
        <p>W</p>
        <el-input-number
          v-model="width"
          :step="1"
          :min="0"
          controls-position="right"
          @change="debounceUpdateSize()"
        />
      </div>
      <div class="row-grid">
        <p>H</p>
        <el-input-number
          v-model="height"
          :step="1"
          :min="0"
          controls-position="right"
          @change="debounceUpdateSize()"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from '../../../untils/commonUtils';
export default {
  name: 'MBaseConfig',
  data(){
    return{
      left:0,
      top:0,
      width:0,
      height:0
    }
  },
  computed: {
    acComponent(){
      return this.$store.state.imageDragMoudules.acComponent;
    }
  },
  watch:{
    acComponent:{
      handler(newVal, oldVal) {
        console.log("点击事件激活图表数据变化：",newVal);
        if (newVal && newVal.id) {
          this.left = newVal.position.left;
          this.top = newVal.position.top;
          this.width = newVal.size.width;
          this.height = newVal.size.height;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods:{
    //更新位置信息
    debounceUpdatePosition(){
      console.log("进入方法");
      const position = { left: this.left, top: this.top };
      this.$store.commit('updateComponent', {
          newState: { ...position },
          key: 'position',
        });
      // debounce(function () {
      //   const position = { left: this.left, top: this.top };
      //   this.$store.commit('updateComponent', {
      //     newState: { ...position },
      //     key: 'position',
      //   });
      // }, 100)
    },
    //更新尺寸信息
    debounceUpdateSize(){
      debounce(function () {
        const size = { width: this.width, height: this.height };
        this.$store.commit('updateComponent', { newState: { ...size }, key: 'size' });
      }, 100);
    }
  },
}
</script>
